<template>
    <el-card>
        <div class="excelTime">日期：{{reportData.reportDate}}</div>
        <el-divider></el-divider>
        <el-descriptions class="margin-top" title="会员数据统计" :column="3" border>
            <template slot="extra">
                <el-button @click="exportExcel" type="primary" size="small">导出Excel</el-button>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    新增会员数
                </template>
                {{reportData.todayNewMember}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    总会员数
                </template>
                {{reportData.totalMember}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    本周新增会员数
                </template>
                {{reportData.thisWeekNewMember}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    本月新增会员数
                </template>
                {{reportData.thisMonthNewMember}}
            </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions class="margin-top" title="预约到诊数据统计" :column="3" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    今日预约数
                </template>
                {{reportData.todayOrderNumber}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    今日到诊数
                </template>
                {{reportData.todayVisitsNumber}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    本周预约数
                </template>
                {{reportData.thisWeekOrderNumber}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    本周到诊数
                </template>
                {{reportData.thisWeekVisitsNumber}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    本月预约数
                </template>
                {{reportData.thisMonthOrderNumber}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    本月到诊数
                </template>
                {{reportData.thisMonthVisitsNumber}}
            </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <span style="font-size: 20px">热门套餐</span>
        <p style="margin-top: -20px">&nbsp</p>
        <el-descriptions v-for="s in reportData.hotSetmeal" :column="3" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    套餐名称
                </template>
                {{s.name}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    套餐预约数
                </template>
                {{s.setmeal_count}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    占比
                </template>
                {{s.proportion}}
            </el-descriptions-item>
        </el-descriptions>
    </el-card>
</template>

<script>
    export default {
        data(){
            return{
                reportData:{
                    reportDate:null,
                    todayNewMember :0,
                    totalMember :0,
                    thisWeekNewMember :0,
                    thisMonthNewMember :0,
                    todayOrderNumber :0,
                    todayVisitsNumber :0,
                    thisWeekOrderNumber :0,
                    thisWeekVisitsNumber :0,
                    thisMonthOrderNumber :0,
                    thisMonthVisitsNumber :0,
                    hotSetmeal :[],
                }
            }
        },
        created() {
            this.getBusinessDate();
        },
        methods:{
            // 导出报表
            exportExcel(){
                window.open("http://localhost:8899/report/exportBusinessReport");
            },
            getBusinessDate(){
                this.$ajax.get("/report/getBusinessReportData").then((res)=>{
                    if(res.data.flag){
                        this.reportData = res.data.data;
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }

                });
            }
        }
    }
</script>

<style scoped>

</style>
